<template>
	<view class="withdrawal">
		<u-navbar :title="navTitle" bgColor="#1678ff" class="nav" :placeholder="true"
			:fixed="true"
			:safeAreaInsetTop="true">
			<view slot="left">
				<u-icon name="arrow-left" color="#fff" size="12" @click="onClickBack"></u-icon>
			</view>
			<view slot="right" @click="onClickRight">
				筛选
			</view>
		</u-navbar>
		<u-popup :show="filterTimer" @close="closeFilterTimer" mode="top" :safeAreaInsetTop="true">
			<view class="filterTimer">
				
				<view class="filterContent">
					<view class="w-flex w-flex-between">
						<view class="startTime" @click="showTime = true" :style="showCurrStartTime !== '请选择日期'?'color:#000;font-size:14px;':''">
							<text>{{showCurrStartTime}}</text>
							<u-icon name="arrow-down" color="#b3b3b3" size="14"></u-icon>
						</view>
						<text style="margin: 0 10px;">至</text>
						<view class="startTime" @click="showEndTime = true" :style="showCurrEndTime !== '请选择日期'?'color:#000;font-size:14px;':''">
							<text>{{showCurrEndTime}}</text>
							<u-icon name="arrow-down" color="#b3b3b3" size="14"></u-icon>
						</view>
					</view>
					<view>
						<u-datetime-picker
							:show="showTime"
							:value="startTime"
							mode="date"
							@cancel="cancel"
							@confirm="confirmTime"
							:maxDate="maxDate"
							:formatter="formatter"
						></u-datetime-picker>
						<u-datetime-picker
							:show="showEndTime"
							:value="endTime"
							mode="date"
							@cancel="cancelEndTime"
							@confirm="confirmEndTime"
							:maxDate="maxDate"
							:formatter="formatter"
						></u-datetime-picker>
					</view>
					<view class="w-flex w-flex-between w-mt-15 timerChoice">
						<text class="dateStyle" @click="timerToday">今日</text>
						<text class="dateStyle" @click="timerWeek">近一周</text>
						<text class="dateStyle" @click="timerMonth">近一月</text>
					</view>
					<view class="w-mt-15 w-flex">
						<text>订单号：</text>
						<u--input
							placeholder="请输入订单号"
							border="surround"
							v-model="orderId"
						></u--input>
					</view>
				</view>
				<view class="w-flex w-flex-between w-mt-20 bottomBtn">
					<text class="txtBtn" @click="closeFilterTimer">取消</text>
					<text class="txtBtn" style="color: #1678ff;" @click="dateFilter">确定</text>
				</view>
			</view>
		</u-popup>
		
		<view class="w-content">
			<!-- <view class="titleBg">
				<view class="w-flex w-font-14">
					<text class="w-mr-15" @click="changeDate">{{choiceDate}}</text>
					<u-icon name="arrow-down-fill" color="#fff" size="10" @click="changeDate"></u-icon>
					
				</view>
				
			</view>
			<u-datetime-picker
				:show="showchoiceDate"
				:value="choiceDialogDate"
				mode="date"
				@cancel="cancelchoiceDate"
				@confirm="confirmchoiceDate"
				:maxDate="choicemaxDate"
				:formatter="formatter"
			></u-datetime-picker> -->
			<view class="cu-list menu-avatar">
				<view class="cu-item cur"  v-for="(item, index) in detailedList" :key="index">
					<view class="cu-avatar radius lg">
						<view>
							<u-avatar :src="item.avatar?item.avatar:'../../static/icon/logo.png'" size="48" shape="square"></u-avatar>
						</view>
					</view>
					<view class="content">
						<view>
							<view class="text-cut">{{item.memo}}</view>
						</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">{{format(item.createtime*1000)}}</view></view>
					</view>
					<view class="action">
						<view class="main-color text-xl">{{item.money}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="listItem" v-if="detailedList.length === 0">
			<u-empty
				mode="data"
				icon="http://cdn.uviewui.com/uview/empty/data.png"
			>
			</u-empty>
		</view>
	</view>
</template>

<script>
import {getPreMonth, format} from  "@/util/common.js"
export default {
	data() {
		return {
			filterTimer: false,
			showTime: false,
			showEndTime: false,
			startTime: Number(new Date().getTime() - 3600 * 1000 * 24 * 31),
			endTime: Number(new Date()),
			maxDate: Number(new Date()),
			showCurrEndTime: '请选择日期',
			showCurrStartTime: '请选择日期',
			choiceDate: '2021年11月',
			showchoiceDate: false,
			choiceDialogDate: Number(new Date()),
			choicemaxDate: Number(new Date()),
			detailedList: [],
			format,
			orderId: '',
			navTitle: ''
		}
	},
	onLoad(e) {
		this.choiceDate = this.formatTimer(this.choiceDialogDate, 'YMD')
		this.initDataList()
		this.navTitle = e.nickname
	},
	methods: {
		async initDataList () {
			this.list = []
			let params = {
				agentid: uni.getStorageSync("YNF_INFO").user_id
			}
			const res = await this.$API({url: '/api/index/money_log',method:"POST", data: params})
			if (res.code === 1) {
				
				this.detailedList = res.data.list
			}
		},
		// 返回页面
		onClickBack () {
			uni.navigateBack()
		},
		// 筛选日期
		onClickRight(){
			this.filterTimer = true
		},
		cancel () {
			this.showTime = false
		},
		cancelEndTime () {
			this.showEndTime = false
		},
		confirmEndTime (date) {
			this.showEndTime = false
			this.showCurrEndTime = this.formatTimer(date.value)
		},
		confirmTime (date) {
			this.showCurrStartTime = this.formatTimer(date.value)
			this.showTime = false
		},
		formatter(type, value) {
			if (type === 'year') {
					return `${value}年`
			}
			if (type === 'month') {
					return `${value}月`
			}
			if (type === 'day') {
					return `${value}日`
			}
			return value
		},
		formatTimer(time, type) {
			var time = new Date(time);
			var y = time.getFullYear();
			var m = time.getMonth()+1;
			var d = time.getDate();
			var h = time.getHours();
			var mm = time.getMinutes();
			var s = time.getSeconds();
			if (type === 'YMD') {
				return y+'年'+this.add0(m)+'月'+this.add0(d)+'日';
			}
			return y+'-'+this.add0(m)+'-'+this.add0(d);
		},
		add0(m){return m<10?'0'+m:m },
		timerToday () {
			this.showCurrStartTime = this.formatTimer(Number(new Date()));
			this.showCurrEndTime = this.formatTimer(Number(new Date()));
		},
		timerWeek () {
			this.showCurrStartTime = this.formatTimer(Number(new Date().getTime() - 3600 * 1000 * 24 * 7));
			this.showCurrEndTime = this.formatTimer(Number(new Date()));
		},
		timerMonth () {
			this.showCurrStartTime = getPreMonth(1);
			this.showCurrEndTime = this.formatTimer(Number(new Date()));
		},
		closeFilterTimer () {
			this.filterTimer = false
		},
		dateFilter () {
			this.filterTimer = false
		},
		changeDate (){
			this.showchoiceDate = true
		},
		cancelchoiceDate () {
			this.showchoiceDate = false
		},
		confirmchoiceDate (date) {
			this.choiceDate = this.formatTimer(date.value, 'YMD')
			this.showchoiceDate = false
		}
	}
}
</script>

<style lang="scss" scoped>
.withdrawal {
	background: #FFFFFF;
	position: absolute;
	width: 100%;
	height: 100%;
	/deep/.u-navbar__content__title {
		color: #FFFFFF !important;
	}
	.nav {
		color: #FFFFFF;
		/deep/.u-navbar__content__title {
			color: #FFFFFF;
		}
	}
	.filterTimer {
		background: #FFFFFF;
		
		.filterContent {
			padding: 20rpx 30rpx;
		}
		.startTime {
			background: #F1F1F1;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #b3b3b3;
			padding: 0 20rpx;
			width: 320rpx;
			height: 60rpx;
			border-radius: 10rpx;
			font-size: 12px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
	/deep/ .u-popup {
		.u-slide-down-enter-active {
			top: 44px !important;
		}
	}
	.w-content {
		
		.titleBg {
			color: #FFFFFF;
			.profit {
				opacity: 0.9;
			}
		}
		
		
	}
	.listItem {
		background: #FFFFFF;
		padding: 10rpx 20rpx;
		
	}
}

</style>
